import React, { useRef } from "react";
import GoBack from "@/components/TheGoBack";
import { Form, Input, DatePicker, Button, Space } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import ThePagination from "@/components/ThePagination";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import { apiGetAdoptRecordPage, apiGetConfirmAdopt } from '@/request/adopt'
import { getDateTime3 } from '@/utils/getDate'
import _ from 'lodash'

const { RangePicker } = DatePicker;

const SearchHeader = ({ setValue }) => {
  const formRef = useRef()
  const onFinish = values => {
    if (values.time && values.time.length) {
      values.createStartTime = getDateTime3(values.time[0]) + ' 00:00:00'
      values.createEndTime = getDateTime3(values.time[1]) + ' 23:59:59'
    }
    delete (values.time)
    _.forIn(values, (v, k) => {
      if (!v) {
        delete (values[k])
      }
    })
    setValue(values)
  }
  const reset = () => {
    formRef.current.setFieldsValue({
      memberNameOrMobile: '',
      status: '',
      time: []
    })
    setValue({})
  }
  return (
    <Form layout="inline" ref={formRef} onFinish={onFinish}>
      <Form.Item name="memberNameOrMobile">
        <Input suffix={<SearchOutlined />} placeholder={"请输入昵称/手机号"} />
      </Form.Item>
      {/* <Form.Item name="status">
        <Select style={{ width: 160 }} options={[{ label: '已领养', value: '1' }, { label: '未领养', value: '0' }]} placeholder="请选择状态" />
      </Form.Item> */}
      <Form.Item label="申请时间" name="time">
        <RangePicker />
      </Form.Item>
      <Form.Item>
        <Space>
          <Button htmlType="submit" type="primary">搜索</Button>
          <Button onClick={reset}>重置</Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

class Apply extends React.Component {
  state = {
    columns: [
      {
        title: "序号",
        dataIndex: "",
        key: "",
        render: (text, record, index) => {
          return index + 1
        }
      },
      {
        title: "联系人",
        dataIndex: "nickName",
        key: "nickName",
      },
      {
        title: "联系方式",
        dataIndex: "memberMobile",
        key: "memberMobile",
      },
      {
        title: "状态",
        dataIndex: "status",
        key: "status",
        render: (text, record) => {
          let label = ''
          switch (_.toString(record.status)) {
            case '0':
              label = '申请领养'
              break;
            case '1':
              label = '领养成功'
              break;
            case '2':
              label = '领养失败'
              break;
            default:
              label = ''
          }
          return label;
        }
      },
      {
        title: "申请时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "操作",
        render: (text, render) => {
          let ren = render.status === '0' ? <TheButton onClick={() => this.adoptConfirm(render.nickName, render.adoptionRecordId)}>确认领养</TheButton> : ''
          return ren
        },
      },
    ],
    dataSource: [],
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
  };
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { id } = this.props.match.params
    const { pageData, searchValue } = this.state
    let res = await apiGetAdoptRecordPage({ petAdoptionId: id, ...pageData, ...searchValue })
    if (res.code === 0 && res.data) {
      this.setState({
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount,
        dataSource: res.data
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => this.getData())
  };
  adoptConfirm = (nickName, petAdoptionRecordId) => {
    React.$confirm({
      title: `您确认选择${nickName}作为领养人吗？`,
      onOk: async () => {
        const { id } = this.props.match.params
        let res = await apiGetConfirmAdopt({ petAdoptionId: id, petAdoptionRecordId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: `选择${nickName}作为领养人成功`
          })
          this.getData()
        }
      },
    });
  };
  setValue = value => {
    this.setState({
      searchValue: value,
      pageData: {
        pageNo: 1,
        pageSize: 10
      }
    }, () => this.getData())
  }
  render() {
    const {
      columns,
      dataSource,
      pageData: { pageNo, pageSize },
      total,
    } = this.state;
    return (
      <div className="p-layout-box">
        <div>
          <GoBack history={this.props.history} title="申请列表" />
        </div>
        <div className="p-search-box" style={{ marginTop: 20 }}>
          <SearchHeader setValue={this.setValue} />
        </div>
        <div className="p-layout-content-pagination">
          <TheTable columns={columns} dataSource={dataSource} />
          <ThePagination
            pageNo={pageNo}
            pageSize={pageSize}
            total={total}
            pageChange={this.pageChange}
          />
        </div>
      </div>
    );
  }
}

export default Apply;
